<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, world!</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-gRC4eoaRyQ8xv2X6Mnf+eOIrtON3wId3dAkwO0HQX26OrFBoLpjX/XWOJacSiZhL" crossorigin="anonymous"></script>


      <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
      <script src="http://webapi.amap.com/maps?v=1.3&key=e09c9105579f5593a9f68cb651e3fcd9"></script>
      <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
      <script src="https://webapi.amap.com/js/marker.js"></script>
      <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
      <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e09c9105579f5593a9f68cb651e3fcd9&plugin=AMap.Driving"></script>
      <style type="text/css">
          *{margin:0; padding:0;}
          html,body,.warpper{height:100%; min-width:1190px;}
          body{overflow: auto;}
          .wrapper{position: relative;}
          .top,.footer{width:100%;height:60px;max-height: 60px; background: #343a40;}
          .center{width:100%;height:auto;position: absolute; top:60px; bottom:60px; background: #ffffff;overflow: auto;}
          .footer{position:absolute; bottom:0;}
          .left{margin-left: 5px;margin-right:5px;width:400px;min-width:400px;max-width: 400px; height:100%; background: #efefef; float:left;overflow: auto}
          .main{margin-left: 5px;margin-right:5px;overflow: hidden;height:100%; background: #eeeeee;overflow: auto}
          .info-set-title{font-family: 等线;font-size: 15px;font-weight: 500;color: #1f1f1f}
          .info-set{margin-left: 5px;}
          .info-set-sub-title{margin-top:10px;margin-left:40px;font-family: 等线;font-size: 15px;font-weight: 500;}
          .gap{width: auto;height: 30px;}
          h1{margin-left: 5px;font-family: 等线;font-size: 25px;font-weight: 500;color: #1f1f1f}
          .input-number-div{margin-top: 10px;margin-left: 20px}
          .input-number-r{margin-top: 10px;margin-left: 20px}
          .input-number{border:1px solid;border-radius:2px;margin-left: 20px;margin-right: 40px;width: 100px;height: 20px;}
          #map{margin-left: 20px;margin-right: 20px;margin-top: 20px;width: auto;height: 600px;background-color: #2b2b2b;}
          #output{flex-wrap:wrap;margin-bottom: 30px;display: flex;justify-content: space-around;margin-left: 20px;margin-right: 20px;margin-top: 20px;width: auto;height: auto;background-color: #ffffff
          }
          #start-analyze{margin-left: 30px;width: 340px;height: 50px;margin-bottom:60px;background-color: aliceblue;border: 2px greenyellow;}
          #panel {position: fixed;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}
          #panel.amap-call {background-color: #009cf9;border-top-left-radius: 4px;border-top-right-radius: 4px;}
          #panel .amap-lib-driving {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;overflow: hidden;}
          #show-route-id{background: #000;width: 300px;height: 300px;opacity: 0.5;}
          #show-route-alerter{position: relative;background: #fff;width: 50%;height: 80%;border-radius: 5px;margin: 5% auto;}
          .black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=88);}
          .white_content {display: none;position: absolute;top: 10%;left: 20%;width: 900px;height: 600px;padding: 20px;background-color: white;z-index:1002;}
          table.altrowstable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #a9c6c9;
            border-collapse: collapse;
        }
          table.altrowstable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #a9c6c9;
        }
          table.altrowstable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #a9c6c9;
        }
          .oddrowcolor{
            background-color:#d4e3e5;
        }
          .evenrowcolor{
            background-color:#c3dde0;
        }
      </style>


  </head>

  <body>

  <div class="warpper">

      <div class="top">
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <a class="navbar-brand" href="#">配配</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                        <span class="navbar-toggler-icon"></span>

                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    Dropdown
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                        </form>
                    </div>
                </nav>
            </div>

      <div class="center" >
				<div class="main">
                    <div id="map"></div>
                    <!--div id="panel"></div-->
                    <div id = "temp"></div>
                    <div id="temp-output" style="display: none">

                        <div id = "output_type" >
                            {{ result_type }}
                        </div>
                        <div id = "output_route" >
                            {{ result_route }}
                        </div>
                        <div id = "output_time">
                            {{ result_time }}
                        </div>
                        <div id = "output_load">
                            {{ result_load }}
                        </div>
                        <div id = "output_length">
                            {{ result_length }}
                        </div>

                    </div>
                    <div id="output">

                    </div>
                </div>
            </div>

  </div>

  <div class="footer"></div>

  <div>
      <div id="light" class="white_content">


          <button href = "javascript:void(0)"
                  onclick = "document.getElementById('light').style.display='none';
                             document.getElementById('fade').style.display='none';
                             document.getElementById('alternatecolor').innerHTML = '';"
                  style="text-align: center;background-color: #343a40;width: 60px; height: 40px;border-radius: 6px;color: white;border: 0px;">
              确认
          </button>

          <div id="show-route-alerter" style="position: center;overflow: auto;width: auto;height: 470px;margin-bottom: 20px">

          </div>

      </div>
      <div id="fade" class="black_overlay"></div>
  </div>
      <script>
          let res = document.getElementById("output_route").innerHTML;
          var jsonObject= JSON.parse(res);
          const routes = []
          var ss=""
          for(let p in jsonObject){
              routes.push(jsonObject[p])

          }
          var car_number = routes.length;
          paths = []
          for (let i = 0 ;i<car_number;i++){
              var path = []
              for (let j = 0 ;j<routes[i].length;j++){
                  path.push(new AMap.LngLat(routes[i][j][0],routes[i][j][1]))
              }
              paths.push(path)
          }
          //构造路线导航类
          var driving = new AMap.Driving({
              map: map,
          });
          var map = new AMap.Map("map", {
              resizeEnable: true,
              center: [116.397428, 39.90923],//地图中心点
              zoom: 13 //地图显示的缩放级别
          });
          var route = []
          var color = [
              "#3688c7",
              "#34c434",
              "#b14a4a",
              "#bba945",
              "#790fb4",
              "#013e09",
              "#600000",
              "#00ffb8",
              "#073c80",
              "#ff0000",
              "#a0602e",
              "#447cc7",
              "#450000",
              "#3688c7",
              "#34c434",
              "#b14a4a",
              "#bba945",
              "#790fb4",
              "#013e09",
              "#600000",
              "#00ffb8",
              "#073c80",
              "#ff0000",
              "#a0602e",
              "#447cc7",
              "#450000"
          ]
          for (let i = 0 ;i<car_number;i++){
              map.plugin("AMap.DragRoute", function() {
                  route.push(new AMap.DragRoute(
                      map= map,
                      path= paths[i],
                      policy= AMap.DrivingPolicy.LEAST_FEE,
                      {
                          showTraffic: false,
                          polyOptions: {
                              strokeColor: color[i]
                          }
                      }
                  ));
                  //map.add(polyline[i]);
                  route[i].search(); //查询导航路径并开启拖拽导航
              });
          }
      </script>

      <script>

          console.log(car_number)

          var json_type= JSON.parse(document.getElementById("output_type").innerHTML);
          type_arr = [];
          for(let p in json_type){
              type_arr.push(json_type[p]);
          }
          let type = type_arr[0];
          console.log(type)

          var json_time = JSON.parse(document.getElementById("output_time").innerHTML)
          time_arr = [];
          for(let p in json_time){
              time_arr.push(json_time[p]);
          }
          console.log(time_arr)

          var json_load = JSON.parse(document.getElementById("output_load").innerHTML)
          load_arr = [];
          for(let p in json_load){load_arr.push(json_load[p]);}
          console.log(load_arr)

          var json_length = JSON.parse(document.getElementById("output_length").innerHTML)
          length_arr = [];
          for(let p in json_length){length_arr.push(json_length[p]);}
          console.log(length_arr)

          console.log(routes)

      </script>

      <script>

          let output = document.getElementById("output");
          let res_output = '';

          for (let i = 0; i < routes.length; i++) {
              h = routes[i].length;
              j = i+1;
              res_output +=
                  '<div class="cardBox" style="border-radius: 5px; margin-top: 10px; margin-bottom: 10px; background-color: white ;width: 350px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);text-align: center;float: left;margin-right: 10px;padding: 5px;padding-top: 15px;">' +
                  '<div class="headerBox" style="background-color: #343a40 ;color: #343a40 ;padding: 10px;font-size: 20px;height: 55px;">' +
                  '<p>' +
                  '<a title="查看详情" style="cursor: pointer; color:white");">' +
                  '路线  ' + j + '  : ' +
                  '</a>' +
                  '</p>' +
                  '</div><div class="bodyBox" style="padding: 10px;">' +
                  '<p style="margin-left: 5px;">所需时间:' + time_arr[i].toFixed(2) + '小时 </p>' +
                  '<p style="margin-left: 5px;">所需路程:' + length_arr[i].toFixed(2) + '公里 </p>' +
                  '<p style="margin-left: 5px;">所需负载:' + load_arr[i].toFixed(2) + '吨 </p>' +

                  '<p style="margin-left: 5px;">网点数量：' +
                  '<a href="javascript:void(0)" class="label label-success" style="border-radius: .25em;">' +
                  (h-2) + '个' +
                  '</a>' +
                  '</p>' +
                  '<button style="color:green;background-color: white;border: 0px" onclick="show_sites()">查看详细路径</button>' +
                  '</div>' +
                  '</div>'
          }
          output.innerHTML=res_output;

          function show_sites(){
              document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'
              let show_route = ''
              for (let i = 0; i <routes.length; i++) {
                  show_route += '<h1>路线'+(i+1)+'</h1><table class="altrowstable" id="alternatecolor" style="width: 500px;margin: 0 auto"><tr><th nowrap="nowrap">配送点名称</th><th nowrap="nowrap">配送点经度</th><th nowrap="nowrap">配送点纬度</th><th nowrap="nowrap">配送点货物量（吨）</th></tr>'
                  for (let j = 0 ; j < routes[i].length ; j++){
                  show_route += '<tr><td nowrap="nowrap" style="">'+routes[i][j][3]+'</td>' +
                      '<td nowrap="nowrap">'+routes[i][j][0]+'</td>' +
                      '<td nowrap="nowrap">'+routes[i][j][1]+'</td>' +
                      '<td nowrap="nowrap">'+routes[i][j][2].toFixed(2)+'吨</td>' +
                      '</tr>'
              }
                  show_route += '</table><br>'
              }
              document.getElementById("show-route-alerter").innerHTML=show_route;
              altRows("alternatecolor");
          }

          function hidder(){
				document.getElementById('light').style.display='block';
				document.getElementById('fade').style.display='block';
			}
      </script>

      <!--iframe id="iframe" name="iframe" style="display:none;"></iframe-->

  </body>
</html>